<template>
    <div class="qilin-QilinUploadFile">
        <el-upload
            ref="QilinUploadFile"
            :action="onwUploadFileConfig.action || '#' "
            :list-type="onwUploadFileConfig.listType || 'text' "
            :auto-upload="onwUploadFileConfig.autoUpload || false "
            :limit="onwUploadFileConfig.limit"
            :drag="onwUploadFileConfig.drag || true "
            :file-list="onwUploadFileConfig.fileList || [] "
            :multiple="onwUploadFileConfig.multiple || false "
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-change="handleChange"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                <span>{{onwUploadFileConfig.uploadText || "拖入此处上传或点击上传"}}</span>
                <div>{{onwUploadFileConfig.fileTypeText || "（支持xls、word、pdf文件格式）"}}</div>
            </div>
        </el-upload>
        <div class="qilin-QilinUploadFile-list">
            <div class="qilin-QilinUploadFile-list-item"
                v-for="(item,index) in onwUploadFileConfig.fileList"
                :key="item.url"
            >
                <img src="@/assets/images/addressBook-file.png" alt="">
                <span @click="previewFiles(item)">{{item.newFileName}}</span>
                <img src="@/assets/images/file-delete.png" alt="" @click="deleteFile(index)">
            </div>
        </div>
    </div>
    <!-- <previewFile ref="previewWordRef"></previewFile> -->
</template>

<script setup>
// import {uploadFiles} from "@/api/index.js";
// import previewFile from "@/components/previewFiles/index.vue";

// 接收父组件传来的值
const propsValue=defineProps({
    uploadFileConfig:{
        type:Object,
        default(){
            return {
                // 组件自身的默认配置
                action:"#", //文件上传至服务器url
                listType:"text", //文件列表类型
                autoUpload:false, //是否自动上传
                limit:3, //文件允许上传数量
                fileList:[], //默认上传文件
                multiple:false, //是否支持多选文件
                drag:true, //是否启用拖拽上传
                showFileList:false, //是否显示已上传文件列表
                uploadText:"拖入此处上传或点击上传", //上传文字说明
                fileTypeText:"（支持xls、word、pdf文件格式）", //支持格式文字说明
                fileType:["xls","xlsx","doc","docx","pdf"], //支持上传的文件类型
                fileSize:20 * 1000 * 1000 //文件上传大小限制20M之内默认
            };
        }
    },
    fileList:{ //用以回显
        type:Array,
        default(){
            return []
        }
    }
});

// 暴露父组件自定义方法
const emits=defineEmits(["update:uploadFileConfig","success"]);

// 组件自身的配置项
let onwUploadFileConfig=computed({
    get(){
        propsValue.uploadFileConfig.fileList=propsValue.fileList || [];
        return propsValue.uploadFileConfig;
    },
    set(val){
        emits("update:uploadFileConfig",val);
    }
});


let previewWordRef=ref(null);

// 文件上传之前的事件监听--仅在action为服务器资源地址时生效
const handleBeforeUpload=(file)=>{
    // console.log(file);
    const index=file.name.lastIndexOf(".");
    const fileType=file.name.slice(index+1);
    if(!onwUploadFileConfig.value.fileType.includes(fileType)){
        ElMessage({
            message:"请上传符合格式要求的文件",
            type:"warning"
        });
        return false;
    }else if(file.size > onwUploadFileConfig.value.fileSize){
        ElMessage({
            message:"文件大小超过限制",
            type:"warning"
        });
        return false;
    };
};

// 文件上传状态改变事件监听
const handleChange=(file)=>{
    // console.log(file);
    const index=file.name.lastIndexOf(".");
    const fileType=file.name.slice(index+1);
    if(!onwUploadFileConfig.value.fileType.includes(fileType)){
        ElMessage({
            message:"请上传符合格式要求的文件",
            type:"warning"
        });
    }else if(file.size > onwUploadFileConfig.value.fileSize){
        ElMessage({
            message:"文件大小超过限制",
            type:"warning"
        });
    }else{
        let formData=new FormData();
        formData.append("file",file.raw);
        // uploadFiles(formData).then((res)=>{
        //     if(res.code === 200){
        //         onwUploadFileConfig.value.fileList.push(res.data);
        //         emits("success",onwUploadFileConfig.value.fileList);
        //     }else{
        //         ElMessage({
        //             message:"文件上传失败",
        //             type:"error"
        //         });
        //     };
        // });
    };
};
// 点击预览文件事件监听
const previewFiles=(item)=>{
    const index=item.originalFilename.lastIndexOf(".");
    const fileType=item.originalFilename.slice(index+1);
    if(fileType === "docx" || fileType === "doc"){
        previewWordRef.value.initPreview({
            isOnline:true,
            type:"word",
            url:item.url
        });
    }else if(fileType === "xlsx" || fileType === "xls"){
        previewWordRef.value.initPreview({
            isOnline:true,
            type:"excel",
            url:item.url
        });
    }else if(fileType === "pdf"){
        previewWordRef.value.initPreview({
            isOnline:true,
            type:"pdf",
            url:item.url
        });
    };
};
// 点击删除文件图标事件监听
const deleteFile=(index)=>{
    onwUploadFileConfig.value.fileList.splice(index,1);
    emits("success",onwUploadFileConfig.value.fileList);
};




</script>

<style lang="scss" scoped>
.el-upload{
    >.el-upload-dragger{
        .el-icon{
            font-size:32px;
            margin-bottom:0;
        }
    }
    .el-upload__text{
        >span{
            color:$text-color-65;
            font-size:$small-text-size;
        }
        >div{
            color:$text-color-45;
            font-size:$small-text-size;
            line-height:20px;
        }
    }
}
.qilin-QilinUploadFile{
    width:100%;
    >div:first-child{
        width:65%;
    }
    >.qilin-QilinUploadFile-list{
        width:65%;
        >.qilin-QilinUploadFile-list-item{
            display:flex;
            align-items:center;
            justify-content: space-between;
            margin:10px 0;
            line-height:1;
            >img{
                width:15px;
                height:15px;
            }
            >span{
                color:$primary-text-color;
                margin:0 6px;
                cursor:pointer;
                flex:1;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
            }
        }
    }
}
</style>
